<!-- 付费用户留存 -->
<template>
    <div>
      <el-card>
        <div class="topInquire">
          <div>
            <!-- 渠道 -->
            <Channel @channel-event="handleSelectChannel"></Channel>
          </div>
  
          <div>
          <!-- 服务器 -->
          <Server @server-event="handleSelectServer"></Server>
          </div>
  
          <div>
          <!-- 日期 -->
          <DatePicker @dateChange="handleDateChange"></DatePicker>
          </div>
  
          <el-button 
          size="small" 
          icon="el-icon-search" 
          type="primary" @click="handleSearch">搜索</el-button>
  
          <el-button icon="el-icon-upload2" type="success" 
            size="small" @click="handleExport">导出Excel</el-button>


          <el-button icon="el-icon-refresh" type="success"
          size="small" @click="handleRefresh">刷新实时数据</el-button>
  
        </div>
  
        <div>
          <el-table
            ref="table"
            border
            :data="payRemainData"
            :height="tableHeight"
            show-summary
          >
            <el-table-column prop="firstDate" label="日期" min-width="120" />
            <el-table-column prop="channelInfo" label="渠道信息" min-width="120" />
            <el-table-column  label="整体汇总" align="center">
              <el-table-column prop="playerCount" label="首次付费人数" min-width="150" />
            </el-table-column>
          <el-table-column  label="留存统计" align="center">
            <el-table-column prop="day1" label="2留" min-width="150" />
            <el-table-column prop="day2" label="3留" min-width="150" />
            <el-table-column prop="day3" label="4留" min-width="150" />
            <el-table-column prop="day4" label="5留" min-width="150" />
            <el-table-column prop="day5" label="6留" min-width="150" />
            <el-table-column prop="day6" label="7留" min-width="150" />
            <el-table-column prop="day7" label="8留" min-width="150" />
            <el-table-column prop="day8" label="9留" min-width="150" />
            <el-table-column prop="day9" label="10留" min-width="150" />
            <el-table-column prop="day10" label="11留" min-width="150" />
            <el-table-column prop="day11" label="12留" min-width="150" />
            <el-table-column prop="day12" label="13留" min-width="150" />
            <el-table-column prop="day13" label="14留" min-width="150" />
            <el-table-column prop="day14" label="15留" min-width="150" />
            <el-table-column prop="day15" label="16留" min-width="150" />
            <el-table-column prop="day16" label="17留" min-width="150" />
            <el-table-column prop="day17" label="18留" min-width="150" />
            <el-table-column prop="day18" label="19留" min-width="150" />
            <el-table-column prop="day19" label="20留" min-width="150" />
            <el-table-column prop="day20" label="21留" min-width="150" />
            <el-table-column prop="day21" label="22留" min-width="150" />
            <el-table-column prop="day22" label="23留" min-width="150" />
            <el-table-column prop="day23" label="24留" min-width="150" />
            <el-table-column prop="day24" label="25留" min-width="150" />
            <el-table-column prop="day25" label="26留" min-width="150" />
            <el-table-column prop="day26" label="27留" min-width="150" />
            <el-table-column prop="day27" label="28留" min-width="150" />
            <el-table-column prop="day28" label="29留" min-width="150" />
            <el-table-column prop="day29" label="30留" min-width="150" />
          </el-table-column>
  
          </el-table>
        </div>
      </el-card>
  
    </div>
  </template>
  
  <script>
  import Channel from '@/components/selectChannel/index.vue'
  import Server from '@/components/selectServer/index.vue'
  import DatePicker from '@/components/datePicker/index.vue'

  import { firstPayRemain,manualTodayRemain } from '@/api/gameStatistics'

  import { export_json_to_excel } from '@/widget/Export2Excel'
  
  export default {
    components: {
     Channel,Server,DatePicker
    },
    data() {
      return {
        payRemainData: [],
        currentPage: 1, // 当前页
        pageSize: 200, // 每页显示条数
        tableHeight: 0, // 表格高度
        selectChannel:[],
        selectServer:[],
        date:[],
        command:'',
        total:0
      }
    },
  
    created() {
      this.getPayRemain()
    },
  
    mounted() {
      this.$nextTick(() => {
        this.getTableHeight()
      })
      window.addEventListener('resize', this.$debounce(this.getTableHeight, 100))
    },
  
    beforeDestroy() {
      window.removeEventListener('resize', this.getTableHeight)
    },
  
    methods: {
      // 获取数据
      async getPayRemain() {
        const res = await firstPayRemain({
          page: this.currentPage,
          limit: this.pageSize
        })
        this.payRemainData = res.data.data.data
        this.total = res.data.data.count
      },

      // 选择日期
      handleDateChange(dateRange){
        this.date = dateRange
      },

      // 选中的渠道
      handleSelectChannel(value){
        this.selectChannel = value
      },

      // 选中的服务器
      handleSelectServer(value){
        this.selectServer = value
      },

      // 刷新实时数据
     async handleRefresh(){
        const res = await manualTodayRemain()
          if (res.data.code === 0) {
            this.$message.success(res.data.message)
          }
        this.getPayRemain()
      },
      
      // 搜索
     async handleSearch() {
        try {
          const query = {}
          if (this.date && this.date.length === 2) {
            // 时间戳毫秒转化为秒
            query.startTime = this.$moment(this.date[0]).unix()
            query.endTime = this.$moment(this.date[1]).unix()
          }
          if (this.selectChannel.length !== 0) {
          query.channels = this.selectChannel
        }
        if (this.selectServer.length !== 0) {
          query.serverUids = this.selectServer
        }
          const result = await firstPayRemain(query)
          this.payRemainData = result.data.data.data
        } catch (error) {
          console.error(error)
          this.$message.error('发生错误，请稍后重试')
        }
      },

      // 表格自适应高度
      getTableHeight() {
        if (this.$refs.table && this.$refs.table.$el) {
          this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 140
        } else {
          this.tableHeight = 300
        }
      },
    
      // 导出
       async handleExport() {
        try {
          const res = await firstPayRemain({
            limit: this.total
          })
  
          // 处理导出数据
          // const exportData = res.data.data.data.map(i => {
          //   for (let day = 2; day <= 30; day++) {
          //    i[`day${day}`] = this.formatNumber(i[`day${day}`]/i.playerCount*100)+'%'
          //  }
          //   return i
          // })
  
          const newData = res.data.data.data.map(item => {
            const arr = []
            const obj = {
              firstDate: '日期',
              channelInfo: '渠道信息',
              playerCount: '首次付费人数',
              day1: '2留',day2: '3留',day3: '4留',day4: '5留',day5: '6留',day6: '7留', day7: '8留',day8: '9留',
              day9: '10留',day10: '11留',day11: '12留',day12: '13留',day13: '14留',day14: '15留',day15: '16留',
              day16: '17留',day17: '18留',day18: '19留',day19: '20留',day20: '21留',day21: '22留',day22: '23留',
              day23: '24留',day24: '25留',day25: '26留',day26: '27留',day27: '28留',day28: '29留',day29: '30留'
            }
            for (const key in obj) {
              arr.push(item[key])
            }
            return arr
          })
  
          const tHeader = [
          '日期', '渠道信息', '首次付费人数', '2留', '3留', '4留', '5留','6留', '7留', '8留','9留',
          '10留','11留','12留','13留','14留','15留','16留','17留','18留','19留','20留','21留',
          '22留','23留','24留','25留','26留','27留','28留','29留','30留']
  
          export_json_to_excel({
            header: tHeader,
            data: newData,
            filename: `付费用户留存表${this.$moment(new Date()).format('YYYYMMDDHHmm')}`,
            autoWidth: true,
            bookType: 'xlsx'
          })
        } catch (error) {
          this.$message.error(error)
        }
      },
    }
  }
  </script>
  <style lang="scss" scoped>
  
  .topInquire{
    font-weight: bold;
    font-size: 14px;
    color: #6a7488;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }
  
  </style>
  